<template>
	<view>

		<remind-carinfo :dataBean="dataBean"></remind-carinfo>

		<view class="item">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="档案信息" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<!-- <text style="line-height: 80rpx; color: #FFC500;">{{dataBean.carOutInsurance.repairStatusShow|filterNull}}</text> -->
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view v-if="dataBean.carArchives != null && dataBean.carArchives.length>0">

				<view v-for="(item, index) in dataBean.carArchives" :key="index">

					<view class="text-line">
						<text class="text-name">档案名称:</text>
						<text class="text-value">{{item.recordName|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">备注:</text>
						<text class="text-value">{{item.remark|filterNull}}</text>
					</view>

					<picPdf :attachment="item.attachment"></picPdf>

					<view class="text-line">
						<text class="text-name">上传时间:</text>
						<text class="text-value">{{item.uploadTime|filterNull}}</text>
					</view>

					<u-line color="#efefef" :customStyle="{'margin-bottom': '20rpx','display': 'block',}"></u-line>
				</view>
			</view>

			<no-data v-else content="暂无档案信息"></no-data>

		</view>

		<view style="height: 100rpx;"></view>

		<view class="button-container" v-if="dataBean.archivesButton">
			<button class="btn-item" @click="bottomClick">新增车辆档案</button>
		</view>

	</view>
</template>

<script>
	import remindCarinfo from '@/components/remind-carinfo.vue';
	import picPdf from '@/components/pic-pdf.vue';
	import {
		collect_handle
	} from '@/common/http.api.js';

	export default {
		components: {
			picPdf,
			remindCarinfo
		},

		data() {
			return {
				dataBean: {
					carArchives: [],
					vehicle:{}
					
				},
				carCode: '',
			}
		},
		methods: {

			bottomClick(type) {
				getApp().globalData.profile_vehicle = this.dataBean.vehicle
				
				uni.navigateTo({
					url:'/pagesA/profile/profile-add?carCode='+this.carCode
				})
			},


		},

		onLoad(op) {
			this.carCode = op.carCode;

		},
		onShow() {
			this.$u.api.carArchivesDetail({
				carCode: this.carCode
			}).then(
				res => {
					this.dataBean = res;
					
				}

			);
		},
	}
</script>

<style lang="scss" scoped>
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}

	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 200rpx;
			height: 100rpx;
		}

		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}

	// .button-container {
	// 	display: flex;
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100rpx;
	// 	bottom: 0;
	// 	z-index: 999;
	// 	background-color: white;
	// 	padding: 0 20rpx 0 0;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;

	// 	button {
	// 		flex: 1;
	// 		margin-left: 20rpx;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		border-radius: 40rpx;
	// 		color: $xz-bgColor-write;
	// 		background-color: $xz-bgColor-blue;
	// 		font-size: 32rpx;
	// 	}

	// }
</style>
